<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/css/buyGood.css" />
    <style>
        .addressSelect {
            z-index: 999;
        }
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        /* pc端 */
        @media screen and (min-width: 592px) {
            #container {
                margin: 0 auto;
                background-color: #fff;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }

            .content {
                padding: 0 10px;
                /* background-color: #eee; */
                display: flex;
                /* position: relative; */
                line-height: 34px;
                font-size: 16px;
                box-sizing: border-box;
                width: 100%;
                border: 1px solid #999;
            }

            .left {
                color: #333;
            }

            .right {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .input {
                display: block;
                border: none;
                font-size: 14px;
                background: transparent;
                color: #555;
                outline: none;
                color: transparent;
                text-shadow: 0 0 0 #333;
                background-color: #fff;
                padding: 5px 0 5px 5px ;
                border-radius: 4px;
                width: 100%;
            }

            .next-icon {
                color: #999;
            }

            .input::-webkit-input-placeholder {
                /* WebKit, Blink, Edge */
                color: #999;
            }

            .input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #999;
            }

            .input::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #999;
            }

            .input:-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: #999;
            }

            #mymodal {
                background-color: none;
                display: none;
                /* position: relative; */
            }

            .modal-main {
                position: relative;
                top: 0;
                left: 0;
                cursor: pointer;
                width: 100%;
                box-sizing: border-box;
                border: 1px solid #ccc;
                overflow: hidden;
                box-shadow: 0px 2px 20px 2px rgba(122, 122, 122, 0.5)
            }
            .address-title{
                padding: 0 10px;
                background-color: #ddd;
                padding-top: 5px;
                text-align: center;
                font-size: 16px;
                font-weight: 700;
            }
            .address-title span{
                color: #888;
                float: right;
            }
            .optionwrapper{
                background-color: #ddd;
                border-bottom: 1px solid #DDDDDD;
                display: flex;
                height: 30px;
                padding-left: 10px;
                box-sizing: border-box;
            }
            .option-menu {
                padding: 5px 20px;
                margin: 0 3px;
            }

            .active-option {
                background-color: #eee;
            }

            .option-content {
                height: 300px;
                padding: 5px;
                padding-bottom: 20px;
                background-color:#fff;
                overflow: scroll;
                overflow-x: hidden;
                /*overflow: hidden;*/
            }
            .option-content::-webkit-scrollbar {
                display: none;
            }
            .option-group {
                display: none;
            }

            .option-list {
                padding: 2px .2rem;
                display: flex;
            }

            .checked {
                width: .15rem;
                height: .15rem;
                background-color: #FF304A;
                display: inline-block;
                margin-left: .2rem;
                border-radius: 50%;
                display: none;
                margin-top: .1rem;
            }
            
            .option-list:hover{
                background-color: #eee;
            }
            .close{
                position: absolute;
                top: 5px;
                right: 10px;
                color: #666;
            }

        }

        /* 手机端 */
        @media screen and (max-width:592px) {
            body {
                background-color: #F5F5F5;
            }
            #container {
                /* padding: 0 15px; */
                margin: 0 auto;
                /* background-color: #eee; */
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }

            .content {
                display: flex;
                position: relative;
                line-height: 34px;
                border: 1px solid #999;
                font-size: 16px;
            }
            .left {
                color: #333;
            }

            .right {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .input {
                display: block;
                /* padding: 10px 0 10px 5px; */
                border-radius: 5px;
                width: 100%;
                border: none;
                font-size: 14px;
                background: transparent;
                color: #555;
                background-color: #fff;
                outline: none;
                color: transparent;
                text-shadow: 0 0 0 #333;
            }

            .next-icon {
                color: #999;
            }
            .input::-webkit-input-placeholder {
                /* WebKit, Blink, Edge */
                color: #999;
            }

            .input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #999;
            }

            .input::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #999;
            }

            .input:-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: #999;
            }

            #mymodal {
                width: 100vw;
                height: 100vh;
                position: absolute;
                left: 0;
                top: 0;
                background-color: rgba(0, 0, 0, .4);
                display: none;
                z-index: 999999;
            }

            .modal-main {
                position: fixed;
                left: 0;
                bottom: 0;
                height: 60%;
                width: 100%;
                background-color: #ccc;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            .address-title {
                padding-top: 10px;
                font-size: 16px;
                font-weight: 700;
                text-align: center;
            }

            .close {
                position: absolute;
                padding: 10px;
                right: 0;
                top: 0;
                color: #888;
            }

            .optionwrapper {
                border-bottom: 1px solid #fff;
                display: flex;
                padding-left: 10px;
                overflow: hidden;
                border-bottom: 1px solid #ddd;
            }

            .option-menu {
                padding: 10px;
            }

            .active-option {
                background-color: #eee;
            }

            .option-content {
                flex: 1;
                padding: 5px;
                background-color: #fff;
                overflow: scroll;
            }

            .option-group {
                display: none;
                height: 100%;
            }

            .option-list {
                padding: 2px .2rem;
                display: flex;
            }

            .checked {
                width: .15rem;
                height: .15rem;
                background-color: #FF304A;
                display: inline-block;
                margin-left: .2rem;
                border-radius: 50%;
                display: none;
                margin-top: .1rem;
            }
        }
    </style>
</head>


<body>
    <div class="wrapper wrapper-content">
        <div class="buyGood">
            <div class="title"><i class="iconfont icon-icon_arrow_left"></i><a class="gonelist" href="shoppingMall.html">&nbsp;返回商城首页</a></div>
            <div class="title1">确认订单信息</div>
            <div class="table-responsive">
                <table class="table table-hover" style="text-align:center;color:#000">
                    <tr class="active navtable">
                        <td>商品信息</td>
                        <td>商品单价</td>
                        <td>商品数量</td>
                        <td>小计</td>
                    </tr>
                    <tr>
                        <td>
                            <div class="goodmes">
                                <div class="img"><img src="img/image/loginbg.png" alt=""></div>
                                <div class="rightname">我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称</div>
                            </div>
                        </td>
                        <td class="redactive" id="yiqian">3</td>
                        <td class="redactive" style="min-width: 140px;">
                            <div class="btn-group">
                                <input class="btn btnjian" type="button" name="minus" value="-" onclick="jian()"><input
                                    class="btn btnnum" type="text" name="amount" value="1" id="shang"><input class="btn btnjia"
                                    type="button" name="plus" value="+" onclick="jia()">
                            </div>
                        </td>
                        <td id="xianzai" style="color:#E31C1C;">0</td>
                    </tr>
                    <tr>
                        <td>配送方式：3天内发货，平台包邮</td>
                        <td class="redactive"></td>
                        <td class="redactive"></td>
                        <td id="xianzai" style="color:#E31C1C;">0</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>订单合计（含运费）<span id="xianzai1" style="color:#E31C1C;">0</span></td>
                    </tr>
                </table>
            </div>
            <div class="title1">收货地址</div>
            <form class="form-horizontal" style="margin-top: 10px;">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">地址信息</label>
                    <div class="col-sm-8">
                        <!-- <select id="inputEmail3" class="form-control col-sm-8">
                            <option>请选择</option>
                        </select> -->
                        <div class="addressSelect">
                                <div id="container">
                              <div class="content">
                                  <!-- <div class="left">
                                      所在地区：
                                  </div> -->
                                  <div class="right">
                                      <input type="text" class="input" id="address" placeholder="请选择收货地址">
                                  </div>
                              </div>
                          </div>
                          <section id="mymodal" class="selected">
                                  <div class="modal-main">
                                      <ul class="optionwrapper">
                                          <li class="option-menu option-menu-one active-option">省</li>
                                          <li class="option-menu option-menu-two">市</li>
                                          <li class="option-menu option-menu-three">区</li>
                                      </ul>
                                      <span class="close">X</span>
                                      <div class="option-content">
                                          <ul class="option-group option-group-one" data-index="0" style="display: block">
                                          </ul>
                                          <ul class="option-group option-group-two" data-index="1">
                                          </ul>
                                          <ul class="option-group option-group-three" data-index="2">
                                          </ul>
                                      </div>
                                  </div>
                              </section>
                          </div>

                    </div>
                </div>
               
                    


                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">详细地址</label>
                    <div class="col-sm-8"><textarea class="form-control" rows="3" style="resize: none;"></textarea></div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">收货人姓名</label>
                    <div class="col-sm-8"><input type="text" class="form-control" id="inputEmail3" placeholder="请输入收货人姓名"></div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label redstar">联系方式</label>
                    <div class="col-sm-8"><input type="text" class="form-control" id="inputEmail3" placeholder="请输入联系方式"></div>
                </div>
            </form>
            <div class="title1">付款方式</div>
            <form class="form-horizontal" style="margin-top: 10px;">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">付款方式</label>
                    <div class="col-sm-8">
                        <select id="inputEmail3" class="form-control col-sm-8">
                            <option>请选择</option>
                        </select>
                        <div style="line-height: 30px; color: #E31C1C;">现金积分余额：<span>$500</span>，通过购买的现金积分：<span>$500</span></div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">安全密码</label>
                    <div class="col-sm-8"><input type="password" class="form-control" id="inputEmail3" placeholder="请输入安全密码"></div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="inputPassword3" placeholder="请输入验证码">
                    </div>
                    <div class="col-sm-2 col-xs-5  img">
                        <img src="img/image/bgtop.png" alt="">
                    </div>
                </div>
                <div class="btnsure"><button id="sureTo">确认购买</button></div>
            </form>
        </div>

    </div>

    <script src="js/province.js"></script>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- <script src="js/plugins/layer/layer.min.js"></script> -->
    <script type="text/javascript" src="js/province.js"></script>


    <!-- 自定义js -->
    <script src="js/hplus.js?v=4.1.0"></script>
    <script type="text/javascript" src="js/contabs.js"></script>
    <script>
        var price = 0.00;
        function jian() {
            var i = parseInt(document.getElementById("shang").valueOf().value) - 1;
            if (i <= 0) {
                i = 0;
            }
            document.getElementById("shang").valueOf().value = i;
            price = document.getElementById("yiqian").innerText * i;
            document.getElementById("xianzai").innerHTML = '￥' + price.toFixed(2);
            document.getElementById("xianzai1").innerHTML = '￥' + price.toFixed(2);
        }
        function jia() {
            var i = parseInt(document.getElementById("shang").valueOf().value) + 1;
            document.getElementById("shang").valueOf().value = i;
            price = document.getElementById("yiqian").innerText * i;
            console.log(price);
            document.getElementById("xianzai").innerHTML = '￥' + price.toFixed(2);
            document.getElementById("xianzai1").innerHTML = '￥' + price.toFixed(2);
        }
      
        $("#sureTo").click(function () {
            layer.open({
                    title: '温馨提示',
                    content: '购买已成功，请在“购物商城-我的订单”中查看已购买的商品。',
                    area: ['300px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //确定的回调
                    }
                });
        });

        // 三级联动
        $(document).ready(function () {
        var newData = []; //新数据
        var citysArray = []; //城市
        var areaArray = []; //地区
        // var chooseMenuStr = '请选择' //添加选择title
        var chooseMenuPro = '省' //添加选择省
        var chooseMenuCity = '市' //添加选择市
        var chooseMenuArea = '区' //添加选择区、县


        function init() {
            //模拟ajax
            setTimeout(() => {
                newData = [...data];
                // 初始化省份
                var optionGroupOne = "";
                $.each(newData, function (index, el) {
                    optionGroupOne +=
                        `<li class="option-list option-list-one">
								<span>${newData[index]["n"]}</span>
								<div class="checked">
								</div>
							</li>`
                });
                $(".option-group-one").html(optionGroupOne)
            }, 100)
        }

        init();



        $("#mymodal").on("click", ".option-menu", function () { //菜单激活
            var i = $(this).index();
            $(this).addClass('active-option').siblings().removeClass('active-option');
            $(".option-group").eq(i).show().siblings().hide()
        })

        //1级 省份点击添加城市
        $("#mymodal").on("click", ".option-list-one", function () {
            var parentIndex = $(this).parent().attr("data-index");
            var provinceName = $(this).text().trim();
            var provinceIndex = $(this).index();
            $(this).find('.checked').show();
            $(this).siblings().find('.checked').hide();
            // console.log(newData[provinceIndex])
            citysArray = newData[provinceIndex]["c"];
            $(".option-menu").eq(parentIndex).text(provinceName)
            var cityStr = "";
            // console.log(citysArray)
            $.each(citysArray, function (index, el) {
                cityStr +=
                    `<li class="option-list option-list-two">
						<span>${citysArray[index]["n"]}</span>
						<div class="checked">
						</div>
					</li>`
            });
            // console.log(cityStr)
            $(".option-group").hide();
            $(".optionwrapper").find(".option-menu").removeClass('active-option')
            $(".option-menu-two").html(chooseMenuCity).addClass('active-option')
            $(".option-group-two").html(cityStr).show();
            $(".option-group-three").html(chooseMenuCity);
            $(".option-menu-three").html(chooseMenuArea)
        })


        //2级 城市点击添加城镇
        $("#mymodal").on("click", ".option-list-two", function () {
            var parentIndex = $(this).parent().attr("data-index");
            var cityName = $(this).text().trim();
            var cityIndex = $(this).index();
            $(this).find('.checked').show();
            $(this).siblings().find('.checked').hide();
            cityArray = citysArray[cityIndex]["a"];
            $(".option-menu").eq(parentIndex).text(cityName)
            var areaStr = "";
            $.each(cityArray, function (index, el) {
                areaStr +=
                    `<li class="option-list option-list-three">
						<span>${cityArray[index]["n"]}</span>
						<div class="checked">
						</div>
					</li>`
            });
            $(".option-group").hide();
            $(".optionwrapper").find(".option-menu").removeClass('active-option')
            $(".option-menu-three").html(chooseMenuArea).addClass('active-option')
            $(".option-group-three").html(areaStr).show();
        })
        //3级 选择城镇
        $("#mymodal").on("click", ".option-list-three", function () {
            var areaName = $(this).text().trim();
            var parentIndex = $(this).parent().attr("data-index");
            // console.log(areaName);
            var menuOne = $(".option-menu").eq(0).text();
            var menuTwo = $(".option-menu").eq(1).text();
            var addressVal = menuOne + " " + menuTwo + " " + areaName;
            $(this).find('.checked').show();
            $(this).siblings().find('.checked').hide();
            $(".option-menu").eq(parentIndex).text(areaName)
            $(".modal-main").animate({
                "bottom": "-600px"
            }, 400);
            setTimeout(() => {
                $("#mymodal").fadeOut()
            }, 350)
            $("#address").val(addressVal)
        })
        var isshow = false;
        $(".right").on("click", function () {         
            if (isshow) {
                 isshow = false; 
                $(".modal-main").animate({
                "bottom": "-600px"
                }, 10);
                setTimeout(() => {
                    $("#mymodal").fadeOut();
                }, 10)
            } else {
                 isshow = true; 
                 $("#mymodal").show();
                $(".modal-main").animate({
                    "bottom": "0"
                }, 400)
            }
           
        })


        $(".close").on("click", function () {
             isshow = false; 
            $(".modal-main").animate({
                "bottom": "-600px"
            }, 10);
            setTimeout(() => {
                $("#mymodal").fadeOut();
            }, 10)
        })

        $("#mymodal").on("click", function (event) {
            var modalMain = $(".modal-main");
            if (!modalMain.is(event.target) && modalMain.has(event.target).length === 0) {
                $(".modal-main").animate({
                    "bottom": "-600px"
                }, 400);
                setTimeout(() => {
                    $("#mymodal").fadeOut();
                }, 350)
            }

        })

    });
    </script>
</body>

</html>